.page-pkbang {
  background: url("../images/pk_bg_1.jpg") no-repeat top center #c2e2da;
  background-size: 100% auto;
  min-height: 100%;
  .pk-header {
    padding: px2rem(50px) 0 0;
    font-size: px2rem(20px);
    color: #fff;
    .item-1 {
      width: px2rem(250px);
      height: px2rem(92px);
      padding: px2rem(16px) 0 0 px2rem(10px);
      overflow: hidden;
      text-align: center;
      background: url("../images/pk_1.png") no-repeat top center;
      background-size: 100% 100%;
    }
    .item-2 {
      width: px2rem(108px);
      height: px2rem(44px);
      overflow: hidden;
      background: url("../images/pk_2.png") no-repeat top center;
      background-size: 100% 100%;
      margin: 0 px2rem(20px) px2rem(6px);
    }
    .item-3 {
      width: px2rem(230px);
      height: px2rem(116px);
      text-align: center;
      padding: px2rem(40px) 0 0 px2rem(10px);
      overflow: hidden;
      background: url("../images/pk_3.png") no-repeat top center;
      background-size: 100% 100%;
    }
  }

  .header-notice {
    padding: 0 px2rem(20px);
    width: px2rem(490px);
    height: px2rem(45px);
    background-color: rgba(#fff, $alpha: 0.8);
    border-radius: px2rem(10px);
    margin: px2rem(20px) auto 0;

    .pic-icon {
      width: px2rem(29px);
      height: px2rem(26px);
      background: url("../images/7.png") no-repeat top center;
      background-size: 100% 100%;
    }
  }
  .sec-ysz-container {
    padding: 0 0 px2rem(40px) 0;

    .bg-pic1 {
      position: absolute;
      right: 0;
      bottom: 0;
      width: px2rem(407px);
      height: px2rem(355px);
      background: url("../images/w_bg_1.png") no-repeat top center;
      background-size: 100%;
    }

    .ysz-wan {
      margin: 0 auto;
      width: px2rem(458px);
      height: px2rem(505px);
      overflow: hidden;
      background: url("../images/wan.png") no-repeat top center;
      background-size: 100%;
    }
  }
  .dice-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: px2rem(400px);
    height: px2rem(400px);
    border-radius: 50%;

    // background: #f60;
    .loading {
      width: px2rem(80px);
      height: px2rem(80px);
      background: url("../images/loading.gif") no-repeat top center;
      background-size: 100% 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .dice {
      position: absolute;
      width: px2rem(70px);
      height: px2rem(76px);
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }

      &.dice1 {
        // top:150px;
        top: 40.4%;
        left: 44.2%;

        &.active {
          animation: r1ac 1s linear;
          -moz-animation: r1ac 1s linear;
          -webkit-animation: r1ac 1s linear;
        }
      }

      &.dice2 {
        // top:200px;
        top: 56%;
        left: 60.5%;

        &.active {
          animation: r2ac 1s linear;
          -moz-animation: r2ac 1s linear;
          -webkit-animation: r2ac 1s linear;
        }
      }

      &.dice3 {
        top: 205px;
        top: 57.5%; // left:138px;
        left: 37%;

        &.active {
          animation: r3ac 1s linear;
          -moz-animation: r3ac 1s linear;
          -webkit-animation: r3ac 1s linear;
        }
      }

      &.dice4 {
        top: 135px;
        top: 35.8%; // left:235px;
        left: 63%;

        &.active {
          animation: r4ac 1s linear;
          -moz-animation: r4ac 1s linear;
          -webkit-animation: r4ac 1s linear;
        }
      }

      &.dice5 {
        top: 110px;
        top: 28.1%; // left:120px;
        left: 32.2%;

        &.active {
          animation: r5ac 1s linear;
          -moz-animation: r5ac 1s linear;
          -webkit-animation: r5ac 1s linear;
        }
      }

      &.dice6 {
        top: 155px;
        top: 48%; // left:80px;
        left: 21.4%;

        &.active {
          animation: r6ac 1s linear;
          -moz-animation: r6ac 1s linear;
          -webkit-animation: r6ac 1s linear;
        }
      }
    }
  }
  .ljcy-btn {
    width: px2rem(316px);
    height: px2rem(96px);
    background: url("../images/ljcy_btn.png") no-repeat top center;
    background-size: 100% 100%;
    margin: 0 auto;
  }
}

.pk-section-pt {
  padding: px2rem(70px) 0 px2rem(80px);
  margin: px2rem(40px) px2rem(30px) 0;
}

.pk-section-cap {
  height: px2rem(150px);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  transform: translate(-50%, 0);

  &.cap-pkgz {
    background-image: url("../images/plgz_1.png");
  }
}

.pk-section-wrapper {
  padding: px2rem(30px) 0 0;
  background: url("../images/sec_top_3.png") no-repeat top center;
  background-size: 100% auto;
}

.pk-section-inner {
  width: 100%;
  padding: 0 0 px2rem(30px) 0;
  background: url("../images/sec_bottom_3.png") no-repeat bottom center;
  background-size: 100% auto;
}

.pk-section-content {
  background: url("../images/sec_mid_3.png") repeat-y top center;
  background-size: 100% auto;
  color: #fff;
  font-size: px2rem(24px);
  *{
    max-width: 1000% !important;
  }
}
